<template>
  <div class="home-wrapper" :data-len="allMenu.length">
    <section class="data-part-box">
      <div class="parking-data-list">
        <section class="data-item-box box-bg">
          <span class="item-data"
            ><span class="item-unit">¥</span>{{ currentMonth.traderAmount | formatNumWithComma(2) }}</span
          >
          <span class="item-name">当月交易金额</span>
        </section>
        <section class="data-item-box box-bg">
          <span class="item-data">{{ currentMonth.tradeCount | formatNumWithComma }}</span>
          <span class="item-name">当月交易次数</span>
        </section>
        <section class="data-item-box box-bg">
          <span class="item-data"
            ><span class="item-unit">¥</span>{{ lastMonth.traderAmount | formatNumWithComma(2) }}</span
          >
          <span class="item-name">上月交易金额</span>
        </section>
        <section class="data-item-box box-bg">
          <span class="item-data">{{ lastMonth.tradeCount | formatNumWithComma }}</span>
          <span class="item-name">上月交易次数</span>
        </section>
      </div>
      <div class="chart-data-box box-bg">
        <h4 class="chart-title left-border-title">最近一月收入趋势</h4>
        <div id="chart-box" class="chart-box"></div>
      </div>
    </section>
    <section class="info-part-box">
      <div class="manage-info-box box-bg">
        <section class="info-item-group">
          <span class="item-title">车场管理方：</span>
          <span class="item-con">{{ operatorName }}</span>
        </section>
        <section class="info-item-group">
          <span class="item-title">上线车场：</span>
          <span class="item-con" v-if="!authzParkList || authzParkList.length <= 1">{{ authzParkName }}</span>
          <el-dropdown placement="bottom" v-else>
            <span class="item-con el-dropdown-link hover-item">{{ authzParkName }}</span>
            <el-dropdown-menu slot="dropdown" class="dark-theme">
              <el-dropdown-item v-for="(item, index) in authzParkList" :key="item.id" v-if="index < 15">{{
                item.name
              }}</el-dropdown-item>
              <el-dropdown-item v-if="authzParkList.length > 15">......</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </section>
      </div>
      <div class="parking-list-box box-bg">
        <section class="platform-notice">
          <header class="notice-header">
            <h4 class="notice-title left-border-title">平台公告</h4>
            <router-link class="item-more" to="/index/announcement" target="_blank">更多 >></router-link>
          </header>
          <ul class="notice-list">
            <li
              class="notice-item"
              :class="{ isClick: item.messageType === 3 }"
              v-for="item in noticeList"
              :key="'notice' + item.id"
              @click="noticeLinkTo(item.messageType)"
            >
              {{
                '[' +
                  formatDateToMonthDay(item.createTime, '.', true) +
                  ']【' +
                  item.messageTypeStr +
                  '】 ' +
                  item.messageTitle
              }}
            </li>
          </ul>
        </section>
        <section class="function-book">
          <h3 class="book-title">产品功能手册</h3>
          <p class="book-unit">快速熟悉产品操作流程</p>
          <img src="../../assets/img/pic_guideline.svg" alt="" />
          <a
            href="https://hd-parking-private.oss-cn-hangzhou.aliyuncs.com/pomp/course/Course.rar"
            class="ake_btn ake_btn_blue download-btn"
            target="_blank"
            >下载产品功能手册</a
          >
        </section>
      </div>
    </section>

    <el-dialog
      title="系统消息"
      :visible.sync="dialogVisible"
      width="580px"
      class="zb-dialog body-ralative-dialog home-protocol-dialog"
    >
      <div class="content" v-if="signedPark">
        <template v-if="signedPark.parkList.length">
          <div class="title">
            以下停车场未签订《停车场服务协议》，请<span class="link-text" v-if="signedPark.signRight"><router-link :to="{ name: 'parkinglot_protocol' }">点击前往签订>></router-link></span>
          </div>
          <p>{{ signedPark.parkinglotStr }}</p>
          <div class="signRight-tips" v-if="!signedPark.signRight">
            您的账号没有权限签订《停车场服务协议》
          </div>
        </template>

        <template v-if="!signedPark.parkList.length">
          <div class="no-tips">
            您没有未签订《停车场服务协议》的车场
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<!-- <script src="./home.js"></script> -->

<script>
import home from './home.js';
export default home;
</script>

<style lang="less" scoped>
@import './home.less';
</style>
